<template>
    <div class="mid-map">
        <ul>
            <li v-for="item in mapDataList" :key="item.name">
                <div v-if="item.type==1" class="map-box type1" :style="item.style">
                    <p>{{item.name}}</p>
                </div>
                <div v-else-if="item.type==2" class="map-box type2" :style="item.style">
                    <p>{{item.name}}</p>
                </div>
                <div v-else-if="item.type==3" class="map-box type3" :style="item.style">
                    <p>{{item.name}}</p>
                </div>
                <div v-else-if="item.type==4" class="map-box type4" :style="item.style">
                    <p>{{item.name}}</p>
                </div>
            </li>
        </ul>
<!--        <div class="info-dialog">-->
<!--            <div class="tit">聚贤街道数据</div>-->
<!--            <div class="cnt">-->
<!--                <div class="item">-->
<!--                    <span>常住人口：</span>-->
<!--                    <p>{{ mapObj.population }}<span>人</span></p>-->
<!--                </div>-->
<!--                <div class="item">-->
<!--                    <span>老年人占比：</span>-->
<!--                    <p class="bfb">{{ mapObj.oldRate }}</p>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
    </div>
</template>

<script>
import {mapData} from "./mapData.js"
export default {
    name: "midMap",
    props: {
        mapObj: {
            type: Object,
            default: () => ({})
        }
    },
    computed: {
      mapDataList() {
        // let windowWidth = window.innerWidth;
        let list = mapData.filter(item => item.type !== 4).map((item, index) => {
          // item.style = {
          //   left: (parseFloat(item.style.left) / 1920) * 100 + "vw",
          //   top: (parseFloat(item.style.top) / 1920) * 100 + "vw",
          // }
          return item
        });
        return list
      }
    },
    data(){
        return {
            mapData: mapData
        }
    },
    created() {
    },
    methods: {

    },
}
</script>

<style lang="scss" scoped>
.mid-map{
    position: relative;
    width: 913px;
    height: 540px;
    background: url("~@/assets/home/map.png") no-repeat;
    background-size: 100% 100%;
    .map-box{
        position: absolute;
    }
    .type1{
        width: 128px;
        height: 63px;
        background: url("~@/assets/home/tipbg1.png") no-repeat;
        background-size: 100% 100%;
        padding-left: 24px;
        p{
            background: linear-gradient(180deg, #ffffff 0%, #ffffffba 80.64%, #ffffff86 98.85%);
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 25.4px;
            line-height: 33px;
        }
    }
    .type2{
        width: 104px;
        height: 25px;
        background: url("~@/assets/home/tipbg2.png") no-repeat;
        background-size: 100% 100%;
        padding: 1.5px 0 0 32px;
        p{
            color: #ffffff;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 16.8px;
            line-height: 22px;
        }
    }
    .type3{
        width: 111px;
        height: 76px;
        background: url("~@/assets/home/tipbg3.png") no-repeat;
        background-size: 100% 100%;
        padding-left: 21px;
        p{
            background: linear-gradient(180deg, #ffffff 0%, #ffffff86 98.85%);
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 22px;
            line-height: 29px;
        }
    }
    .type4{
        width: 96px;
        height: 40px;
        background: url("~@/assets/home/tipbg4.png") no-repeat;
        background-size: 100% 100%;
        padding: 11px 0 0 36px;
        opacity: 0.6;
        p{
            color: #ffffff;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 14px;
            line-height: 18px;
        }
    }
    .info-dialog{
        position: absolute;
        top: 369px;
        left: 76px;
        width: 195px;
        height: 111px;
        background: url("~@/assets/home/dialog.png") no-repeat;
        background-size: 100% 100%;
        .tit{
            padding: 11.4px 0 0 25px;
            background: linear-gradient(180deg, #ffffff 34%, #00f6ff 100%);
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 18px;
            line-height: 23px;
        }
        .cnt{
            margin-top: 12px;
            padding-left: 16px;
            .item{
                display: flex;
                + .item{
                    margin-top: 6px;
                }
                span{
                    color: #ffffff;
                    font-family: "Source Han Sans CN";
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 24px;
                    margin-left: 2px;
                }
                p{
                    color: #159aff;
                    font-family: "Source Han Sans CN";
                    font-weight: 700;
                    font-size: 16px;
                    line-height: 24px;
                    span{
                        color: #cce6ff;
                        font-family: "Source Han Sans CN";
                        font-weight: 500;
                        font-size: 14px;
                        line-height: 21px;
                    }
                }
                .bfb{
                    color: #66e1df;
                    font-family: "Source Han Sans CN";
                    font-weight: 700;
                    font-size: 16px;
                    line-height: 24px;
                }
            }
        }
    }
}
</style>